import { createFileRoute } from "@tanstack/react-router";
import { useId } from "react";
import { ReportsCalendar } from "@/components/reports/reports-calendar";
import { ReportsCard } from "@/components/reports/reports-card";

export const Route = createFileRoute("/_app/reports")({
	component: RouteComponent,
});

function RouteComponent() {
	const id = useId();
	return (
		<div className="p-6 flex gap-6 h-full w-full">
			<ReportsCalendar />
			<div className="grid grid-cols-3 2xl:grid-cols-4 grid-rows-4 gap-4 h-full w-full">
				<ReportsCard key={id} />
			</div>
		</div>
	);
}
